<template>
  <div ref="content" :style="{width: source.data.width || '100%', height: source.data.height||'100px'}"></div>
</template>

<script>
  // Pie设置教程
  // https://blog.csdn.net/sleepwalker_1992/article/details/82532210
  export default {
    name: 'PieReportEngine', /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
    data() {
      return {
        octopus: this.$parent.octopus,
        // 超过索引部分则循环从下标0开始。
        color: [
          "#F8B62D", // 橙黄色
          "#FF7600", // 橙色
          "#FF6200", // 橙红色
          "#FF6A6A", // 淡红色
          "#DB552D", // 体检报告红色
          "#EC342F", // 红色
          "#ACBED5", // 体检报告灰色
          "#BEE4F8", // 灰蓝色
          "#77EAFF", // 淡蓝色
          "#10B9F8", // 天蓝色
          "#008FFF", // 正蓝色
          "#0F49AA", // 深蓝色
          "#E4D354", // 黄色
          "#6A90D0", // 体检报告灰蓝色
          "#8085E9", // 淡紫色
          "#FDB747", // 体检报告黄色
          "#FFF7E5", // 体检报告米黄色
          "#B2DF8A", // 体检报告绿色
          "#90ED7D", // 绿色
          "#920783", // 紫色
        ]
      }
    },
    created: function () {
      this.init();
      // let o = this;
      // setTimeout(function () {
      //   o.load();
      // }, 1000);
      this.octopus.tips.debug("BarReportEngine执行了created事件。");
    },
    // 只会执行一次
    mounted: function () {
      // this.$nextTick(function () {
      //   this.octopus.tips.debug("BarReportEngine执行了$nextTick");
      // });
      // this.octopus.tips.debug("BarReportEngine执行了mounted事件。");
      const that = this; //固定this指针到变量，防止后续this指向变更
      that.octopus.load.loadEcharts(that.load); //引入echarts
    },
    beforeUpdate: function () {
      // this.octopus.tips.debug("BarReportEngine执行了beforeUpdate事件。");
    },
    updated: function () {
      this.octopus.tips.debug("[BarReportEngine执行了updated事件。");
    },
    // 活动事件，写在这里的好处是不管是第一次创建还是后退回来，都会触发这个事件
    // 比较典型的就是列表组件，返回的时候往往是需要刷新的。
    activated: function () {
      // this.load();
      // this.$nextTick(function () {
      //   this.octopus.tips.debug("BarReportEngine执行了activated.$nextTick事件。");
      // });
      this.octopus.tips.debug("BarReportEngine执行了activated事件。");
    },
    // 组件停用时，也就是切换出去的时候，需要注意的是，AppMenuEngine组件切换出去，不允许缓存，需要释放到初始状态，以便于下次进来。
    deactivated: function () {
      this.destroyData();
      this.octopus.tips.debug("BarReportEngine执行了deactivated事件。");
    },
    computed: {
      // 如果cellData数据发生了改变,则触发这个事件。
      changeCell: function () {
        return this.source.id;
      },
      changePage: function () {

      }
    },
    methods: {
      init: function () {
        this.initData();
      },
      // 初始化数据，主要是还原#param等预设参数，重新绑定。
      initData: function () {
        // 如果前端没有设置颜色
        if (!this.source.report.colorData) {
          this.source.report.colorData = this.color;
        }
        // alert("::" + JSON.stringify(this.source.report.colorData));
      },
      // 执行加载
      load: function () {
        let o = this;

        // 基于准备好的dom，初始化echarts实例
        let reportContent = echarts.init(this.$refs.content);

        this.octopus.request.api.post("/Octopus/Engine/List", this.source.data,
          // 处理回调事件，通过分析data.status.code的状态来实现。
          function (data) {
            if (data.status.code == 200) {
              // 渲染图表数据
              let optionData = {
                // backgroundColor: 'pink',
                // title: {
                //   text: o.source.report.title.name || "",
                //   subtext: o.source.report.title.note || "",
                //   x: o.source.report.title.local || "left",
                //   // top: 20, // 下沉20
                // },
                tooltip: {
                  trigger: 'item',
                  axisPointer: {
                    type: 'cross',
                    crossStyle: {
                      color: '#00ff00'
                    },
                  },
                  // 展示面板格式化
                  formatter: function (params) {
                    let res = params.name + "：" + params.percent + "%（" + params.value + "）";
                    return res;
                  },
                },
                toolbox: {
                  right: "20",
                  feature: {
                    // restore: {show: true},
                    saveAsImage: {show: true}
                  }
                },
                legend: {
                  // right: 10, // 各项偏移设置
                  // top: 20,
                  bottom: 10,
                  // data: ['用电量', '预算电量', '功率', '预算功率']
                  // selected: {'用电量': false, '预算用电量': false}      // 后续可控制初始化显示或隐藏的列
                },
                series: [{
                  type: 'pie',
                  radius: '75%',
                  center: ['50%', '50%'],
                  selectedMode: 'single', // 点击展开效果
                  data: [
                    // {value: 1548, name: '幽州', itemStyle: {normal: {color: '#DB552D'}}},
                    // {value: 235, name: '荆州', itemStyle: {normal: {color: '#6A90D0'}}},
                    // {value: 510, name: '兖州', itemStyle: {normal: {color: '#204771'}}},
                    // {value: 634, name: '益州', itemStyle: {normal: {color: '#FDB747'}}},
                    // {value: 735, name: '西凉', itemStyle: {normal: {color: '#238FF1'}}}
                  ],
                  label: {                  //饼图图形上的文本标签
                    normal: {
                      show: true,
                      // position: 'inner', //标签的位置
                      textStyle: {
                        fontWeight: 300,
                        fontSize: 12        //文字的字体大小
                      },
                      formatter: function (params) {
                        // let res = params.name + "\n" + params.percent + "%";
                        let res = params.percent + "%";
                        return res;
                      },
                    }
                  },
                }]
              };

              if (o.source.report.title) {
                optionData.title = {
                  text: o.source.report.title.name || "",
                  subtext: o.source.report.title.note || "",
                  x: o.source.report.title.local || "left",
                  // top: 20, // 下沉20
                };
              }

              $(data.content.queryData).each(function (index, item) {
                if (item[o.source.report.cellData.item] != null && item[o.source.report.cellData.value] != null) {
                  // 拼装series数据
                  let seriesData = {
                    value: item[o.source.report.cellData.value],
                    name: item[o.source.report.cellData.item],
                    itemStyle: {
                      normal: {
                        color: o.color[index] || o.color.DarkGrey,
                      }
                    }
                  };
                  optionData.series[0].data.push(seriesData);
                } else {
                  o.octopus.tips.error("项目列不存在，请检查配置。");
                }
              });

              // 执行渲染
              reportContent.setOption(optionData);
              // 执行事件
              reportContent.on('click', function (params) {
                if (o.clicked) {
                  o.clicked({
                    title: params.seriesName,
                    name: params.name,
                    value: params.value,
                    type: params.seriesType,
                  });
                }
              });
            } else {
              o.octopus.tips.error(data);
            }
          });

        $(window).resize(function () {
          reportContent.resize();
        });
      },
      // 组件停用时把data修正回原始数据，其他属性因为不会变，所以不用还原。
      destroyData: function () {

      },
      // 控件数据变更事件
      change: function (new_cell, old_cell) {

      },
    },
    watch: {},
    props: ["source", "changed", "clicked"]
  }

</script>

/*  scoped的意思是这里的样式只对当前页面有效不会影响其他页面，还有可以设置lang="scss"就是支持css预编译，也就是支持sass或者less  */
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

</style>
